<template>
  <div>
    <el-tabs v-if="detailedInformation" v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item,key,index) in detailedInformation"
        :key="item.curName"
        :label="item.tabName"
        :name="String(index)"
      >
        <div v-if="item.type=='info'">
          <el-row>
            <el-col v-for="i in item.info" :key="i.value" :span="12" class="items" style="margin-top: 30px;">
              <el-row :gutter="20">
                <el-col :span="10" style="text-align: right;">
                  {{ i.key }}:
                </el-col>
                <el-col :span="10" style="text-align: left;">
                  <!-- echo -->
                  <file-upload v-if="i.echo" :form="item.data" :photo-name="i.value" :file-type="'img'" :title="i.key" :no-delete-btn="true" />
                  <span :hidden="i.echo">{{ i.func?i.func(item.data[i.value]):item.data[i.value] }}</span>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <div v-if="item.type=='table'">
          <el-table
            ref="multipleTable"
            border
            :data="item.list"
            tooltip-effect="dark"
            style="width: 100%"
            :fit="true"
          >

            <el-table-column
              v-for="i in item.keys"
              :key="i.key"
              :label="i.headName"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">
                <el-rate v-if="i.start" :disabled="true" :value="Number(scope.row[i.key])" />
                <span v-else> {{ scope.row[i.key] }}</span>
              </template>
            </el-table-column>

          </el-table>
          <div style="float:right;margin-top: 50px;">
            <el-pagination
              background
              :current-page.sync="item.page"
              :page-size="item.pageSize"
              :page-sizes="[10, 40, 80, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="item.total"
              @size-change="handleSizeChange($event,item)"
              @current-change="handleCurrentChange($event,item)"
            />
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import fileUpload from '@/components/fileUpload'
export default {
  components: {
    fileUpload
  },
  props: {
    detailedInformation: Object
  },
  data() {
    return {
      activeName: '0'
    }
  },
  watch: {
    detailedInformation(val) {
      console.log(val)
    }

  },
  mounted() {
  },
  methods: {
    handleClick() {

    },
    handleSizeChange(e, val) {
      this.$emit(val.funcName, val.id, val.page, e)
    },
    handleCurrentChange(e, val) {
      this.$emit(val.funcName, val.id, e, val.pageSize)
    }
  }
}
</script>
<style lang="scss" scoped>
    .app-container {
        width: 100%;
    }

    .items {
        text-align: center;
    }
</style>
